<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<title>Control (S version)</title>
</head>

<body onload="start()" style="background:gray;">

<div id="menu">
  <a href="control.html" target="control" style="background:gray;">Control</a>
  <a href="bus.html" target="bus">Bus</a>
  <a href="plan.html" target="plan">Plan</a>
  <a href="log.html" target="log">Log</a>
</div>

<div style="width: 800px; height: 600px;">
  <div id="widget" style="position: relative;  left:100;" >

  <img id="boat"       width="208" height="495" style="position: absolute; left: 0; top: 0;" src="boat.png"/>
  <img id="sts_sail"   width="41" height="289"  style="position: absolute; left: 80; top: 200; -webkit-transform-origin:top;" src="boom.png"/>
  <img id="ctl_sail"   width="30" height="289"  style="position: absolute; left: 85; top: 200; -webkit-transform-origin:top;" src="needle.png"/>
  <img id="sns_wind"   width="20" height="100"  style="position: absolute; left: 90; top: 200; -webkit-transform-origin:top;" src="dashed.png"/>
  
  <img id="sts_rudd_l" width="10" height="60"  style="position: absolute; left: 60; top: 490; -webkit-transform-origin:top;" src="boom.png"/>
  <img id="ctl_rudd_l" width="8"  height="80"  style="position: absolute; left: 60; top: 490; -webkit-transform-origin:top;" src="needle.png"/>
  <img id="sts_rudd_r" width="10" height="60"  style="position: absolute; left: 140; top: 490; -webkit-transform-origin:top;" src="boom.png"/>
  <img id="ctl_rudd_r" width="8"  height="80"  style="position: absolute; left: 140; top: 490; -webkit-transform-origin:top;" src="needle.png"/>

  <img id="sns_imuyaw"   width="240" height="240" style="position: absolute; left: 300; top: 50;" src="rose.png"/>
  <img id="sns_gpscog"   width="20"  height="140" style="position: absolute; left: 410; top: 170; -webkit-transform-origin:top;" src="boom.png"/>
  <img id="sns_compass"  width="20"  height="140" style="position: absolute; left: 410; top: 170; -webkit-transform-origin:top;" src="needle.png"/>
  <img id="sns_imuspeed" width="20"  height="140" style="position: absolute; left: 410; top: 170; -webkit-transform-origin:top;" src="dashed.png"/>

    <div style="position: absolute; left: 550; top: 50;">
    <div><img width="10" height="20" src="boom.png"/>GPS COG <span id="d_gps" class="val"></span></div>
    <div><img width="10" height="20" src="needle.png"/>Compass <span id="d_compass" class="val"></span></div>
    <div><img width="10" height="20" src="dashed.png"/>IMU speed <span id="d_imuspeed" class="val"></span></div>
    </div>
    
  <img id="sns_imuyaw2"   width="240" height="240" style="position: absolute; left: 300; top: 350;" src="rose.png"/>
  <img id="ctl_alphastar" width="20" height="140" style="position: absolute; left: 410; top: 470; -webkit-transform-origin:top;" src="needle.png"/>
  <img id="fil_truewind"  width="20" height="140" style="position: absolute; left: 410; top: 470; -webkit-transform-origin:top;" src="dashed.png"/>

    <div style="position: absolute; left: 550; top: 350;">
    <div><img width="10" height="20" src="needle.png"/>alpha_star <span id="d_alphastar" class="val"></span></div>
    <div><img width="10" height="20" src="dashed.png"/>true wind <span id="d_truewind" class="val"></span></div>
    </div>
    
  </div>
</div>

<div id="status" height="5%" width="100%" style="background:yellow;" >
  status
</div>

<div id="help" height="5%" width="100%" style="background:white;" >
   This is a r/o page; use controlrw.html to control Avalon
</div>


<script>
function e(id) { return document.getElementById(id) }
function rot(id, angle) { e(id).style['-webkit-transform'] ='rotate(' + angle + 'deg)' }

function rnan(x) {
    if (Number.isNaN(x))  return "nan"
    return x
}

function znan(x) {
    if (Number.isNaN(x))  return 0
    return x
}

var lastmsg = {
    'rudderctl': { 'timestamp_ms':0, 'rudder_l_deg':0, 'rudder_r_deg':0, 'sail_deg':0, },
    'helm':	 { 'timestamp_ms':0, 'alpha_star_deg':0, },
    'helmsman_st': { 'direction_true_deg': 0 },
    'imu':  	 { 'yaw_deg':0, 'vel_x_m_s':0, 'vel_y_m_s':0 },
    'compass':   { 'yaw_deg':0, },
    'gps':   	 { 'cog_deg':0, },
    'remote':    { 'command':1, 'alpha_star':0 },
}

var handlers = {
    'ruddersts': function(msg) {
	rot('sts_rudd_l', msg.rudder_l_deg)
	rot('sts_rudd_r', msg.rudder_r_deg)
	rot('sts_sail', msg.sail_deg)
    },
    'rudderctl': function(msg) {
	rot('ctl_rudd_l', msg.rudder_l_deg)
	rot('ctl_rudd_r', msg.rudder_r_deg)
	rot('ctl_sail', msg.sail_deg)
    },
    'status_left':  function(msg) { rot('sts_rudd_l', msg.angle_deg) },
    'status_right': function(msg) { rot('sts_rudd_r', msg.angle_deg) },
    'status_sail':  function(msg) { rot('sts_sail', msg.angle_deg) },
    'wind': 	    function(msg) { rot('sns_wind', msg.angle_deg) },
    'imu':	    function(msg) {
	rot('sns_imuyaw',  -msg.yaw_deg)
	rot('sns_imuyaw2', -msg.yaw_deg)
	rot('sns_compass',   180 + lastmsg['compass'].yaw_deg - msg.yaw_deg)
	rot('sns_gpscog',    180 + lastmsg['gps'].cog_deg - msg.yaw_deg)
	rot('ctl_alphastar', 180 + lastmsg['helm'].alpha_star_deg - msg.yaw_deg)
	rot('fil_truewind',  180 + lastmsg['helmsman_st'].direction_true_deg - msg.yaw_deg)
	var ims = Math.atan2(msg.vel_x_m_s, msg.vel_y_m_s)*180.0/Math.PI
	rot('sns_imuspeed',  180 + ims - msg.yaw_deg)
	e("d_imuspeed").innerHTML = Math.round(ims)
     },
    'compass': 	    function(msg) { rot('sns_compass',   180 + msg.yaw_deg - lastmsg['imu'].yaw_deg); e("d_compass").innerHTML = msg.yaw_deg },
    'gps': 	    function(msg) { rot('sns_gpscog',    180 + msg.cog_deg - lastmsg['imu'].yaw_deg); e("d_gps").innerHTML = msg.cog_deg },
    'helm':         function(msg) { rot('ctl_alphastar', 180 + msg.alpha_star_deg - lastmsg['imu'].yaw_deg);  e("d_alphastar").innerHTML = msg.alpha_star_deg },
    'helmsman_st':  function(msg) { rot('fil_truewind',  180 + msg.direction_true_deg - lastmsg['imu'].yaw_deg);  e("d_truewind").innerHTML = msg.direction_true_deg },
}


var ws

function start() {
    var nan = Number.NaN  // needed for eval of "label":nan in msg

    ws = new WebSocket("ws://" + window.location.host + "/lbus");
    ws.onmessage = function (evt) {
	var msg = eval('('+evt.data+')')
	if (msg == null) return
        for (x in msg) {
	    f = handlers[x]
            if (f != null) f(msg[x])
	    lastmsg[x] = msg[x]
        }

    };

    ws.onopen  = function(err) { document.body.style.background = 'white' }
    ws.onclose = function(err) { document.body.style.background = 'darkgrey' }
    ws.onerror = function(err) { document.body.style.background = 'red' }

    setInterval(function() {
        if(lastmsg['remote'].command == kIdleHelmsmanMode || lastmsg['remote'].command == kOverrideSkipperMode) {
		send_remotectl()
	}
    }, 2000)
}


</script>
</body></html>
